<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>在线OJ系统</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
        <a class="navbar-brand font-weight-bold" href="#">在线 OJ 系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="topMenu">

        </div>
    </nav>

    <!--hero section-->
    <section class="bg-hero">
        <div class="container">
            <div class="row vh-100">
                <div class="col-sm-12 my-auto text-center">
                    <h1>在线 OJ 系统</h1>
                    <p class="lead text-capitalize my-4">
                        基于 Java 实现的在线 OJ 系统
                    </p>
                    <a href="https://github.com/sinimal-hit/sinamal/tree/master/oj" class="btn btn-outline-light btn-radius btn-lg">Github 链接</a>
                </div>
            </div>
        </div>
    </section>

    <!--components-->
    <section class="my-5 pt-5" id="app">
        <div class="container">
            <!-- 表示题目列表页 -->
            <div class="row mb-5" id="tables" v-show="status=='list'">
                <div class="col-sm-12">
                    <div class="mt-3 mb-5">
                        <h3>题目列表</h3>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>标题</th>
                                    <th>难度</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="problem in problems" v-on:click="getProblem(problem.id)">
                                    <td>{{problem.id}}</td>
                                    <td>{{problem.title}}</td>
                                    <td>{{problem.level}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 表示题目详情页 -->
            <!-- 两个页面都在一个 html 中, 通过一些简单的技巧来完成显示上的切换 -->
            <div class="row mb-5" v-show="status=='detail'">
                <div class="col-sm-12">
                    <div class="jumbotron jumbotron-fluid">
                        <div class="container">
                            <!-- 放置题目的标题和难度 -->
                            <h3>{{problem.id}}.{{problem.title}}.{{problem.level}}</h3>
                            <!-- 用来显示一个文本的原始内容 -->
                            <!-- 在 pre 标签内部来放置题目的要求 -->
                            <pre>{{problem.description}}</pre>
                        </div>
                    </div>
                    <!-- v-model 能够做到双向绑定, 只要编辑框发生变化, 变量的值就改变了 -->
                    <div>
                        <div id="editor" style="min-height:400px;">
                            <textarea style="width: 100%; height: 200px"></textarea>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success" v-on:click="compile(problem.id)">提交</button>
                </div>
            </div>
        </div>
    </section>

    <!--footer-->
    <section class="py-5 bg-dark">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                    <!-- <h3>Upgrade to Pro Version</h3>
                        <p class="pt-2">
                            We are working on <b>Charcoal Pro</b> which will be released soon. The pro version 
                            will have a lot more components, sections, icons, plugins and example pages. 
                            Join the waiting list to get notified when we release it (plus discount code).
                        </p>
                        <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                        <hr class="my-5"/> -->
                    <p class="pt-2 text-muted">
                        &copy; 版权所有:童立川
                    </p>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
    <script>
        var app = new Vue({
            // #app CSS 中的 id 选择器
            el: '#app',
            data: {
                status: 'list',  // 'list' 题目列表 'detail' 题目详情
                problems: [

                ],
                // 当前用户选中的题目
                problem: {
                    // id: 1,
                    // title: '两数之和',
                    // level: '简单',
                    // description: '这是题目要求',
                    // templateCode: 'templateCode'
                }
            },
            methods: {
                getProblems() {
                    // jquery 这个库发送 ajax 请求的方式
                    $.ajax({
                        url: 'problem',
                        type: 'get',
                        // data http 响应的 body, status 就是状态码
                        success: function (data, status) {
                            app.problems = data;
                        }
                    })
                },
                getProblem(problemId) {
                    $.ajax({
                        url: 'problem?id=' + problemId,
                        type: 'get',
                        success: function (data, status) {
                            app.problem = data;
                            app.status = 'detail';
                            // 预期点击某个题目的时候, 就能把题目的代码模板设置进去
                            editor.setValue(data.templateCode);
                        }
                    });
                },
                compile(problemId) {
                    // 这个方法会在点击 提交 按钮的时候触发
                    // 就会给服务器发送一个 ajax 请求
                    var question = {
                        id: problemId,
                        // code 就是 textarea 里的代码
                        // editor.getValue() 就能获取到编辑框内部的代码
                        code: editor.getValue(),
                    }
                    $.ajax({
                        url: 'compile',
                        type: 'post',
                        contentType: 'application/json; charset=utf-8',
                        // data 属性放置请求的 body 内容
                        // JS 里把对象转成 JSON 字符串的方法
                        data: JSON.stringify(question),
                        success: function (data, status) {
                            // 把得到的响应结果直接通过对话框的形式来显示
                            var msg = data.errno + "\n";
                            if (data.reason) {
                                msg += data.reason;
                            }
                            if (data.stdout) {
                                msg += data.stdout;
                            }
                            alert(msg);
                        }
                    })
                }
            }
        });

        app.getProblems();

        // ace.js 的代码一定要放到 vue 的代码的后面. 
        // 否则 ace.js 会受到 vue 的干扰就不生效了
        // 此处参数的 editor 就对应到上面的 <div id="editor">
        let editor = ace.edit("editor");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/java");
        editor.resize();
        document.getElementById('editor').style.fontSize = '20px';
    </script>
</body>

</html>